<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #bigbox {
            width: 300px;
            height: 500px;
            margin: 120px auto;
            /* background-color: aqua; */
            border: 1px solid black;
        }

        .top {
            width: 100%;
            height: 30px;
            /* background-color: navy; */
            display: flex;
            justify-content: space-between;
        }

        .top p {
            font-weight: 700;
            line-height: 40px;
        }

        .top span {
            font-size: 12px;
            font-weight: 700;
            line-height: 40px;
            margin-right: 10px;
        }

        main {
            height: 410px;
            width: 100%;
            /* background-color: darkcyan; */
        }

        .list {
            height: 80px;
            width: 100%;
            /* background-color: yellowgreen; */
            display: flex;
            margin-top: 15px;
        }

        .image {
            height: 100%;
            width: 20%;
            /* background-color: gold; */
            text-align: center;
            box-sizing: border-box;
        }

        .image img {
            width: 100%;
            padding-top: 10px;
            padding-left: 5px;
            
        }

        .mid {
            width: 55%;
            height: 100%;
            /* background-color: tan; */
            padding-left: 30px;
        }

        .right {
            width: 25%;
            height: 100%;
            /* background-color: darkgoldenrod; */
            box-sizing: border-box;
            display: flex;
            align-items: flex-end;
            padding-bottom: 10px;
            justify-content: space-around;
            padding-right: 10px;
        }

        .right p:nth-child(1) {
            height: 12px;
            width: 12px;
            border-radius: 50%;
            line-height: 10px;
            border: 1px solid black;
            font-weight: 700;
            text-align: center;
        }

        .right p:nth-child(2) {
            height: 12px;
            width: 12px;
            line-height: 10px;
            font-weight: 700;
            text-align: center;
        }

        .right p:nth-child(3) {
            height: 12px;
            width: 12px;
            border-radius: 50%;
            line-height: 10px;
            border: 1px solid black;
            /* font-weight: 700; */
            text-align: center;
            background-color: rgba(36, 45, 165, 0.881);
            color: white;
        }

        .mid p:nth-child(1) {
            font-size: 12px;
            font-weight: 700;

        }

        .mid p:nth-child(2) {
            line-height: 90px;
            color: red;
        }
        .bottom{
            height: 50px;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.632);
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .bottom p{
            font-size: 20px;
            font-weight: 700;
            color: wheat;
            margin: 0 20px;
        }
        .bottom .count{
            width: 100px;
            height: 30px;
            background-color: limegreen;
            color: white;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div id="bigbox">
        <div class="top">
            <p>已选商品</p>
            <span @click="clear(item)">清空</span>
        </div>
        <main>
            <div class="list" v-for="(item,index) in tanklist" v-bind:key="index">
                <div class="image">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="mid">
                    <p>{{item.name}}</p>
                    <p>￥{{item.price}}</p>
                </div>
                <div class="right">
                    <p @click="minus(item)">-</p>
                    <p>{{item.id}}</p>
                    <p @click="add(item)">+</p>
                </div>
            </div>
        </main>
        <div class="bottom">
            <p>总价{{Count}}</p>
            <div class="count" @click="jiesuan(item)">去结算</div>
        </div>
    </div>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#bigbox',
        data: {
            tanklist: [
                { pic: './img/4.png', name: '秋刀鱼/斤', price: "35" ,id:1},
                { pic: './img/5.png', name: '鲜大带鱼/斤', price: "45",id:1},
                { pic: './img/6.png', name: '鲜活全母皮皮虾/斤', price: "85",id:1},
                { pic: './img/4.png', name: '限量最右章鱼/斤', price: "108",id:1 },
            ]
        },
        watch: {},
        directives: {},
        components: {},
        computed: {
             Count(){
                var Count=0
                for(var i=0;i<this.tanklist.length;i++) {
                    Count += this.tanklist[i].price*this.tanklist[i].id
                }
                return Count
             }
        },
        methods: {
            minus(item){
                if(item.id<=1){
                    item.id=1
                }else{
                    item.id--
                }
               
            },
            add(item){
                if(item.id>=5){
                    item.id=5
                }else{
                    item.id++
                }
            },
            clear(item){
                this.tanklist=null
            },
            jiesuan(item){
                alert('欢迎下次再来')
            }
            
        },
        
    })
</script>